<template>
    <div class="box">
        <div class="head">
            <img :src="datas.poster" alt="">
            <section>
                <span>{{ datas.categories }}</span>
                <span>始于{{ datas.year }}</span>
                <span>{{ datas.country }}</span>
            </section>
        </div>
        <div class="one">{{ datas.title }}</div>
        <div class="two">{{ datas.original_title }}</div>
        <div class="three">{{ datas.brief }}</div>
        <div class="foru">理解列表</div>
        <div class="jie">
            <div v-for="item in shuju" class="nihao">第{{ item }}届</div>
        </div>

    </div>
</template>
<script>


import axios from 'axios'


export default {
    data() {
        return {
            datas: [],
            shuju: [],
        }
    },
    created() {
        let name = this.$route.query.id
        axios.get(`https://test-h5-api.ixook.com/awards/${name}`).then(res => {

            this.datas = res.data.data
            console.log(this.datas);
            this.shuju = res.data.data.session

        })
    }
}
</script>
<style lang="scss" scoped>
.box {
    background-color: #fff;
}

.jie {
    margin-left: 27px;
    margin-top: 15px;

}

.nihao {
    width: 86px;
    height: 30px;
    float: left;
}

.one {
    margin: 0.53333333rem 0.4rem 0.26666667rem;
    height: 0.53333333rem;
    line-height: 0.53333333rem;
    font-size: 0.53333333rem;
    font-weight: bold;
}

.two {
    padding: 0 0.4rem;
    font-size: 0.37333333rem;
    color: #666;
    height: 0.53333333rem;
    line-height: 0.53333333rem;
}

.three {
    margin-top: 0.13333333rem;
    padding: 0 0.4rem;
    font-size: 0.37333333rem;
    line-height: 0.58666667rem;
    color: #333;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-align: justify;
}

.foru {
    font-size: 0.37333333rem;
}

.head {
    width: 100%;
    height: 250px;
    background-color: #bb9354;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    section {
        position: absolute;
        left: 15px;
        bottom: 8px;

        span {
            vertical-align: top;
            display: inline-block;
            margin-right: 0.13333333rem;
            padding: 0 0.16rem;
            height: 0.48rem;
            line-height: 0.48rem;
            font-size: 0.32rem;
            background-color: rgba(0, 0, 0, 0.35);
            border-radius: 0.05333333rem;
            color: #fff;
        }
    }


    img {
        margin: auto;
        width: 110px;
        height: 157px;

    }
}
</style>